<template>
  <div class="box">
    <span class="corner lt"></span>
    <span class="corner lb"></span>
    <span class="corner rt"></span>
    <span class="corner rb"></span>
    <div class="header" v-if="showHeader">
      <span class="icon"></span>
      {{ title }}
    </div>
    <div :class="[showHeader?'_content':'_content_full']">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
  /**是否显示头部 */
  showHeader: {
    type: Boolean,
    default: true
  },
  /**头部标题名称 */
  title: {
    type: String,
    default: ''
  }
});
</script>
<style lang="less" scoped>
.box {
  background-image: url("@/assets/images/box_background.png");
  background-repeat: repeat-x;
  background-position: 0% 100%;
  background-size: 100% 100%;
  background-color: var(--boxBgColor);
  border: var(--boxBorderWidth) solid var(--boxBoderColor);
  position: relative;
  padding: 0.25rem 1rem;
  box-shadow: inset 0px 0px 2.5rem 1px #0f16a5;
  background-color: rgba(18, 21, 92, 0.8);
}

.corner {
  padding: 0.75rem;
  border-color: var(--cornerColor);
  border-style: solid;
  position: absolute;
}
.lt {
  left: -3px;
  top: -3px;
  border-width: var(--boxBorderWidth) 0 0 var(--boxBorderWidth);
}

.lb {
  left: -3px;
  bottom: -3px;
  border-width: 0 0 var(--boxBorderWidth) var(--boxBorderWidth);
}

.rt {
  right: -3px;
  top: -3px;
  border-width: var(--boxBorderWidth) var(--boxBorderWidth) 0 0;
}

.rb {
  right: -3px;
  bottom: -3px;
  border-width: 0 var(--boxBorderWidth) var(--boxBorderWidth) 0;
}

.header {
  height: 2.75rem;
  line-height: 2.75rem;
  width: 100%;
  text-align: start;
  font-size: var(--titleFontSize);
  font-weight: 400;
  color: #ffffff;
}

.icon {
  padding: 3px;
  background-color: #84daff;
  box-shadow: 0px 0px 0.375rem 1px rgba(132, 218, 255, 0.6);
  border-radius: 0.25rem;
  opacity: 1;
  margin-right: 0.625rem;
}
._content,
._content_full {
  width: 100%;
  position: relative;
}
._content {
  height: calc(100% - 2.75rem);
}
._content_full {
  height: 100%;
}
</style>
